class Vue {
    constructor(options) {
        //保存存入的数据如果没有值的默认是一个对象
        this.$options = options || {};
        //保存传入的data数据
        this.$data = options.data || {};
        //保存导入的el,这里先做一个判断,是否为字符串,如果是字符串选中该dom元素
        //如果不是字符串则等于传入的属性值
        this.$el = typeof (options.el) === 'string' ? document.querySelector(options.el) : options.el;
        //调用此方法给传入的data都添加setter和getter
        this._proxyData(this.$data);

        //监视data的改变
        new Observer(this.$data);

        //调用compiler对象解析指令和差值表达式
        new Compiler(this);
    }
    _proxyData(data) {
        //遍历data中的所有属性
        Object.keys(data).forEach(key => {
            //把所有data的属性注入到vue实例中
            Object.defineProperty(this, key, {
                //可遍历
                enumerable: true,
                //可以修改
                configurable: true,
                get() {
                    return data[key]
                },
                set(newValue) {
                    if (data[key] === newValue) {
                        return
                    }
                    data[key] = newValue
                }
            })
        })
    }
}